<template>
  <div class="notify">
    <van-nav-bar title="消息通知" left-arrow @click-left="fn" />
    <ul>
      <li
        @click="listShow(index)"
        v-show="show"
        v-for="(item, index) in data.notifyData"
        :key="index"
      >
        <div class="l">
          <img :src="item.img" alt="" />
        </div>
        <div class="r">
          {{ item.title }}
        </div>
      </li>
    </ul>

    <div
      v-show="show == false"
      class="box"
      v-for="(item, index) in data.xiaoxiData.list"
      :key="item.id"
    >
      <div class="date">
        <!-- {{ new Date(+new Date() - item.created_at).toLocaleString() }} -->
        <span>6月12日</span>
      </div>
      <p>{{ item.message_info }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import { notifyApi } from "@/http/api";
const router = useRouter();
const show = ref(true);
const data = reactive({
  notifyData: [
    {
      img: "",
      title: "课程通知",
      message_classify: "2",
    },
    {
      img: "",
      title: "系统通知",
      message_classify: "1",
    },
    {
      img: "",
      title: "订单通知",
      message_classify: "3",
    },
  ],
  xiaoxiData: [],
});
console.log(data.a);
const fn = () => {
  if (show.value == false) {
    show.value = true;
  } else {
    router.back();
  }
};
const listShow = async (i) => {
  console.log(data.notifyData[i].message_classify);
  show.value = false;
  const res = await notifyApi(data.notifyData[i].message_classify);
  data.xiaoxiData = res;
  console.log(data.xiaoxiData);
};
</script>
<style lang="scss" scoped>
ul {
  li {
    display: flex;
    padding: 20px;
    border-bottom: 1px solid #eee;
    .l {
      img {
        width: 90px;
        height: 90px;
      }
    }
    .r {
      padding: 20px;
      box-sizing: border-box;
      font-size: 16px;
    }
  }
}
.box {
  padding: 20px;
  box-sizing: border-box;
  .date {
    font-size: 14px;
    background-color: #ccc;
    color: #fff;
    width: 180px;
    text-align: center;
    line-height: 50px;
    border-radius: 6px;
    margin: auto;
  }
  p {
    font-size: 14px;
    color: #999;
    padding: 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #eaeaea;
  }
}
</style>